import React, {Component} from 'react'
import {Col, Button} from 'antd'
import {HeaderWrapper} from "./styled";
import {connect} from 'react-redux'
import {actionFunc as loginActionFunc} from '@/components/Login/store'

class Header extends Component {
    render() {
        const {logOut} = this.props
        return (
            <HeaderWrapper>
                <Col span={4} className='header-left'>
                    <i className='iconfont logo'>&#xe6f0;</i>
                    <span className='logo-title'>Router 800</span>
                </Col>
                <Col span={14} className='header-middle'>
                     Admin Dashboard!
                </Col>
                <Col span={6} className='header-right'>
                    <span className='user'>{"welcome, "+this.props.admin}</span>

                    <i className='iconfont user'>&#xe673;</i>
                    <Button type='primary' className='btn' onClick={logOut}>退出</Button>
                </Col>
            </HeaderWrapper>
        )
    }
}
const mapState = (state)=>({
    admin: state.getIn(['header','admin'])
})
const mapDispatch =(dispatch)=>({
    logOut(){
        localStorage.removeItem('loginStatus')
        dispatch(loginActionFunc.changeLoginStatus(false))
    }
})

export default connect(mapState,mapDispatch)(Header)
